<template>
 <div class="list">
    <div class="phone-viewport">
  <md-list class="custom-list md-triple-line">

    <md-list-item v-for="(item,i) in dateils"  :key="i" @click="openNewWindow(item.html_url)">
      <md-avatar>
        <img :src="item.owner.avatar_url" alt="People">
      </md-avatar>

      <div class="md-list-text-container">
        <span>{{item.name}}</span>
        <span>{{item.description}}</span>
        <p><md-icon  class="md-warn" v-if="item.language">fingerprint</md-icon>{{item.language}}<md-icon class="md-warn">access_time</md-icon> {{item.updated_at | timerFilter}}</p>
      </div>

      <md-button class="md-icon-button md-list-action" @click="giveStar(item.stargazers_count)">
        <md-icon class="md-primary">star</md-icon>
        <span>{{item.stargazers_count}}</span>
      </md-button>

      <md-divider class="md-inset"></md-divider>
    </md-list-item>

  </md-list>
</div>
 </div>
</template>

<script type="text/ecmascript-6">
 export default {
   data () {
     return {

     }
   },
   props: ['dateils','loading'],
   methods: {
     openNewWindow (url) {
       window.open(url)
     },
     giveStar (vlue) {

     }
   }
 }
</script>

<style scoped>
.md-button.md-icon-button{
     width: 50px;
    min-width: 50px;
    height: 56px;
}
</style>
